<template>
	<view class="notice-list">
		<view v-for="(i, j) in list" :key="j" class="list-item" @click="on('clickCard', $event, { item: i, index: j })">
			<view class="item-title">
				<text :user-select="true" :decode="true" space="emsp">{{ i.title }}</text>
			</view>
			<view class="item-message">
				<image class="message-headicon" :src="i.teacherPhoto ? i.teacherPhoto : '/static/index/headicon_none.png'"></image>
				<view class="message-text">{{ i.teachSubject }}老师（{{ i.teacherName }}）{{ i.friendlyTime }}发布了{{ typeName(i.type) }}</view>
			</view>
			<view class="item-content">
				<view class="content-text">
					<text :decode="true" space="emsp">{{ i.content }}</text>
				</view>
				<image
					v-if="i.photoList && i.photoList.length"
					class="content-image"
					:src="i.photoList[0].path"
					mode="aspectFill"
					@error="handleImageError($event, i.photoList[0], 'path')"
				></image>
			</view>
			<view class="item-viewed">
				<view class="viewed-pie">
					<MyPie class="pie-outer" :dia="30" :progress="(i.readNumber / i.receiveNumber) * 100"></MyPie>
					<view class="pie-inner"><image class="inner-image" src="/static/index/icon_letter.png"></image></view>
				</view>
				<view>已查看{{ i.readNumber }}/{{ i.receiveNumber }}人</view>
			</view>
		</view>
		<view v-if="list.length == count" class="list-bottom">---没有更多了，仅展示近一个月内的数据---</view>
	</view>
</template>

<script>
import MyPie from '@/components/my-pie/my-pie.vue';
export default {
	name: 'notice-list',
	props: {
		fns: {
			type: Array,
			default: () => {
				return [];
			}
		},
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		count: {
			type: Number,
			default: 0
		}
	},
	computed: {
		typeName() {
			return type => {
				if (type === 'school_hours_change') return '放学时间调整通知';
				if (type === 'suspend_classes') return '停课通知';
				if (type === 'other') return '其他';
			};
		}
	},
	methods: {
		on(fn, e, payload) {
			if (!this.fns.find(i => i === fn)) {
				// 触发内置方法
				if (typeof this[fn] === 'function') this[fn](e, payload);
			}
			// 触发回调方法
			this.$emit('handle', fn, e, payload);
		},
		handleImageError(e, item, key) {
			item[key] = '/static/img/image_error.png';
		}
	},
	components: {
		MyPie
	}
};
</script>

<style lang="less" scoped>
.notice-list {
	.list-item {
		border-radius: 20rpx;
		background-color: #ffffff;
		padding-top: 30rpx;
		padding-right: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		margin-top: 30rpx;
		
		.item-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #222222;
		}

		.item-message {
			display: flex;
			flex-direction: row;
			align-items: center;
			.message-headicon {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
			}
			.message-text {
				font-size: 24rpx;
				color: #999999;
				margin-left: 10rpx;
			}
		}

		.item-content {
			font-size: 28rpx;
			color: #444444;
			border-bottom: 2rpx solid #dedede;

			display: flex;
			flex-direction: row;
			align-items: center;

			padding-top: 10rpx;
			padding-bottom: 20rpx;
			.content-text {
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;

				display: -webkit-box; /**对象作为伸缩盒子模型展示**/
				-webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
				-webkit-line-clamp: 3; /**显示的行数**/
				overflow: hidden; /**隐藏超出的内容**/
			}
			.content-image {
				width: 140rpx;
				height: 120rpx;
				border-radius: 20rpx;
				margin-left: 50rpx;
			}
		}

		.item-viewed {
			font-size: 24rpx;
			color: #444444;

			display: flex;
			flex-direction: row;
			align-items: center;

			padding-top: 20rpx;

			.viewed-pie {
				width: 30px;
				height: 30px;
				margin-right: 15rpx;

				position: relative;

				.pie-outer {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}

				.pie-inner {
					width: 80%;
					height: 80%;
					background-color: #ffffff;

					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);

					border-radius: 50%;

					.inner-image {
						width: 85%;
						height: 85%;

						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	}

	.list-bottom {
		padding: 15rpx 0;

		font-size: 24rpx;
		text-align: center;
		color: #7f7f7f;
	}
}
</style>
